<template>
  <view class="userLayout"  pageBg>
    <view class="userInfo">
      <view class="avatar">
        <image src="../../static/logo.png" mode="aspectFill"></image>
      </view>
      <view class="ip">119.163.181.236</view>
      <view class="address">来自：河南</view>
    </view>
    
    <view class="selection">
      <view class="list">
        <navigator url="/pages/classlist/classlist" class="row">
          <view class="left">
            <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
              <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" fill="#666"/>
            </svg>
            <view class="text">我的下载</view>
          </view>
          <view class="right">
            <view class="text">0</view>
            <svg class="arrow" viewBox="0 0 24 24" width="15" height="15">
              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="#aaa"/>
            </svg>
          </view> 
        </navigator>
        
        <navigator url="/pages/classlist/classlist" class="row">
          <view class="left">
            <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
              <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#666"/>
            </svg>
            <view class="text">我的评分</view>
          </view>
          <view class="right">
            <view class="text">2</view>
            <svg class="arrow" viewBox="0 0 24 24" width="15" height="15">
              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="#aaa"/>
            </svg>
          </view> 
        </navigator>
      </view>
    </view>
    
    <view class="selection">
      <view class="list">
        <view class="row" @click="showContactDialog">
          <view class="left">
            <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
              <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" fill="#666"/>
              <path d="M11 12h2v2h-2zm0-3h2v2h-2zm0-3h2v2h-2z" fill="#666"/>
            </svg>
            <view class="text">联系客服</view>
          </view>
          <view class="right">
            <svg class="arrow" viewBox="0 0 24 24" width="15" height="15">
              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="#aaa"/>
            </svg>
          </view>
        </view>
        
        <view class="row">
          <view class="left">
            <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
              <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" fill="#666"/>
              <path d="M7 12h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2z" fill="#666"/>
            </svg>
            <view class="text">订阅更新</view>
          </view>
          <view class="right">
            <svg class="arrow" viewBox="0 0 24 24" width="15" height="15">
              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="#aaa"/>
            </svg>
          </view> 
        </view>
        
        <view class="row">
          <view class="left">
            <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
              <path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" fill="#666"/>
            </svg>
            <view class="text">常见问题</view>
          </view>
          <view class="right">
            <svg class="arrow" viewBox="0 0 24 24" width="15" height="15">
              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="#aaa"/>
            </svg>
          </view> 
        </view>
      </view>
    </view>

    <!-- 客服电话弹窗 -->
    <uni-popup ref="contactPopup" type="dialog">
      <uni-popup-dialog 
        mode="base"
        title="联系客服"
        content="客服电话：400-123-4567"
        :duration="0"
        @confirm="callCustomerService"
        confirmText="立即拨打"
        cancelText="取消">
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>

import { ref } from 'vue'

const contactPopup = ref(null)

const showContactDialog = () => {
  contactPopup.value.open()
}

const callCustomerService = () => {
  uni.makePhoneCall({
    phoneNumber: '4001234567'
  })
}
</script>

<style lang="scss" scoped>
.userLayout {
  /* 更柔和的双层渐变背景 */
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  position: relative;
  min-height: 100vh;
  z-index: 0;
  
  /* 背景装饰元素 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300rpx;
    background: linear-gradient(120deg, rgba(200, 216, 255, 0.4) 0%, transparent 100%);
    z-index: -1;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 10%;
  }
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300rpx;
    height: 300rpx;
    background: radial-gradient(circle, rgba(255, 228, 230, 0.3) 0%, transparent 70%);
    z-index: -1;
  }

  .userInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0 40rpx;
    background: rgba(255, 255, 255, 0.95);
    margin: 30rpx;
    border-radius: 24rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    
    /* 用户信息卡装饰线 */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 8rpx;
      background: linear-gradient(to right, #a1c4fd, #d4c4fb, #a1c4fd);
    }
    
    .avatar {
      width: 180rpx;
      height: 180rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 24rpx;
      border: 6rpx solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
      
      image {
        width: 100%;
        height: 100%;
        transition: transform 0.3s;
      }
      
      &:active image {
        transform: scale(0.95);
      }
    }
    
    .ip {
      font-size: 34rpx;
      color: #444;
      margin-bottom: 8rpx;
      font-weight: 500;
      letter-spacing: 0.5rpx;
    }
    
    .address {
      font-size: 28rpx;
      color: #777;
      display: flex;
      align-items: center;
      
      &::before {
        content: '📍';
        margin-right: 6rpx;
        font-size: 24rpx;
      }
    }
  }
  
  .selection {
    margin: 30rpx;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24rpx;
    padding: 0 20rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    
    + .selection {
      margin-top: -20rpx; /* 卡片重叠效果 */
    }
    
    .list {
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 110rpx;
        padding: 0 20rpx;
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
        transition: all 0.2s;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:active {
          background-color: rgba(0, 0, 0, 0.02);
          transform: translateX(4rpx);
        }
        
        .left {
          display: flex;
          align-items: center;
          
          .icon {
            margin-right: 24rpx;
            flex-shrink: 0;
            transition: transform 0.3s;
          }
          
          .text {
            font-size: 32rpx;
            color: #444;
            font-weight: 500;
          }
        }
        
        .right {
          display: flex;
          align-items: center;
          
          .text {
            margin-right: 20rpx;
            font-size: 28rpx;
            color: #888;
          }
          
          .arrow {
            transition: transform 0.3s;
          }
        }
        
        &:hover {
          .left .icon {
            transform: scale(1.1);
          }
          .right .arrow {
            transform: translateX(6rpx);
          }
        }
      }
    }
  }
}

/* 弹窗样式优化 */
:deep(.uni-popup-dialog) {
  border-radius: 24rpx !important;
  background: white !important;
  box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.15) !important;
  
  .uni-popup__title {
    color: #444 !important;
    font-size: 36rpx !important;
  }
  
  .uni-popup__content {
    color: #666 !important;
    font-size: 32rpx !important;
    padding: 20rpx 0 40rpx !important;
  }
}
</style>
